<template>
  <div class="dt-shop">
    <div class="dt-shop-tab">
      <ul>
        <router-link tag="li"
          v-for="list in tabList"
          :key="list.id"
          :to="`/shop/${list.id}`"
        >
          <img :src="list.imageUrl" alt="">
          <span>{{ list.name }}</span>
        </router-link>
      </ul>
    </div>
    <div class="dt-shop-list">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'dtshop',
  data () {
    return {
      tabList: []
    }
  },
  created () {
    this.$http.getTabs()
      .then((resp) => {
        this.tabList = resp.list.slice(1)
        if (!this.$route.params.shopid) {
          const id = sessionStorage.getItem('shopid') || this.tabList[0].id
          this.$router.push(`/shop/${id}`)
        }
      })
  }
}
</script>

<style lang="scss" scoped>
.dt-shop {
  display: flex;
  height: 100%;
  .dt-shop-tab {
    width: 23%;
    overflow-x: hidden;
    ul {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-evenly;
      li {
        border: {
          top: 1px solid transparent;
          bottom: 1px solid transparent;
          right: 1px solid #ccc;
        }
        display: flex;
        line-height: 3;
        align-items: center;
        box-sizing: border-box;
        &.router-link-exact-active,
        &.router-link-active {
          color: #26a2ff;
          border: {
            top: 1px solid #ccc;
            bottom: 1px solid #ccc;
            right: 1px solid transparent;
          }
        }
        img {
          width: 29%;
        }
      }
    }
  }
  &-list {
    flex: 1;
    overflow-x: hidden;
    // overflow: hidden;
  }
}
</style>
